// src/screens/auth/RegisterScreen.tsx
import React, {useState, useRef, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  ActivityIndicator,
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import LinearGradient from 'react-native-linear-gradient';
import Toast from 'react-native-toast-message';
import { AppDispatch, RootState } from '../../store/store';
import { register, sendRegisterCode } from '../../store/slices/authSlice';
import { useNavigation } from '@react-navigation/native';
import { RootStackParamList } from '../../navigation/types.ts'
import { StackNavigationProp } from '@react-navigation/stack';
type NavigationProp = StackNavigationProp<RootStackParamList>;

const RegisterScreen: React.FC = () => {
  const navigation = useNavigation<NavigationProp>();
  const dispatch = useDispatch<AppDispatch>();
  const { isLoading } = useSelector((state: RootState) => state.auth);

  // 表单状态
  const [email, setEmail] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [agreedToTerms, setAgreedToTerms] = useState(false);

  // UI状态
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [codeSent, setCodeSent] = useState(false);
  const [countdown, setCountdown] = useState(0);
  const [currentStep, setCurrentStep] = useState(1); // 1: 基本信息, 2: 验证邮箱

  // 🔥 新增状态：记录验证码是否已发送
  const [hasCodeBeenSent, setHasCodeBeenSent] = useState(false);
  const [isSendingCode, setIsSendingCode] = useState(false);

  // 🔥 新增：记录上次发送验证码的邮箱，用于检测邮箱是否变化
  const [lastSentEmail, setLastSentEmail] = useState('');

  // 定时器引用
  const countdownTimerRef = useRef<NodeJS.Timeout | null>(null);

  // 输入框引用
  const usernameRef = useRef<TextInput>(null);
  const passwordRef = useRef<TextInput>(null);
  const confirmPasswordRef = useRef<TextInput>(null);
  const codeRef = useRef<TextInput>(null);

  // 🔥 清理定时器
  useEffect(() => {
    return () => {
      if (countdownTimerRef.current) {
        clearInterval(countdownTimerRef.current);
      }
    };
  }, []);

  // 验证函数
  const validateEmail = (email: string): boolean => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  const validatePassword = (password: string): boolean => {
    // 至少8位，包含大小写字母和数字
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
    return passwordRegex.test(password);
  };

  const validateUsername = (username: string): boolean => {
    // 2-20个字符，只能包含字母、数字和下划线
    const usernameRegex = /^[a-zA-Z0-9_]{2,20}$/;
    return usernameRegex.test(username);
  };

  // 发送验证码
  const sendVerificationCode = async () => {
    // 防止重复点击
    if (isSendingCode || countdown > 0) {
      return;
    }

    if (!validateEmail(email)) {
      Toast.show({
        type: 'error',
        text1: '邮箱格式不正确',
      });
      return;
    }

    setIsSendingCode(true);

    try {
      // 调用API发送验证码
      await dispatch(sendRegisterCode(email)).unwrap();

      // 设置已发送标志
      setHasCodeBeenSent(true);
      setLastSentEmail(email);
      setCountdown(60);

      // 清理旧的定时器
      if (countdownTimerRef.current) {
        clearInterval(countdownTimerRef.current);
      }

      // 倒计时
      countdownTimerRef.current = setInterval(() => {
        setCountdown(prev => {
          if (prev <= 1) {
            if (countdownTimerRef.current) {
              clearInterval(countdownTimerRef.current);
              countdownTimerRef.current = null;
            }
            return 0;
          }
          return prev - 1;
        });
      }, 1000);

      Toast.show({
        type: 'success',
        text1: '验证码已发送',
        text2: '请查看您的邮箱',
      });
    } catch (error: any) {
      // 解析错误信息
      const errorMessage = error?.message || '请稍后重试';

      Toast.show({
        type: 'error',
        text1: '发送失败',
        text2: errorMessage,
      });

      // 发送失败时重置状态
      setHasCodeBeenSent(false);
    } finally {
      setIsSendingCode(false);
    }
  };

  // 下一步
  const handleNextStep = () => {
    // 验证第一步的信息
    if (!email || !username || !password || !confirmPassword) {
      Toast.show({
        type: 'error',
        text1: '请填写所有字段',
      });
      return;
    }

    if (!validateEmail(email)) {
      Toast.show({
        type: 'error',
        text1: '邮箱格式不正确',
      });
      return;
    }

    if (!validateUsername(username)) {
      Toast.show({
        type: 'error',
        text1: '用户名格式不正确',
        text2: '2-20个字符，只能包含字母、数字和下划线',
      });
      return;
    }

    if (!validatePassword(password)) {
      Toast.show({
        type: 'error',
        text1: '密码强度不够',
        text2: '至少8位，包含大小写字母和数字',
      });
      return;
    }

    if (password !== confirmPassword) {
      Toast.show({
        type: 'error',
        text1: '两次密码不一致',
      });
      return;
    }

    // 🔥 检查邮箱是否变化
    const emailChanged = lastSentEmail && lastSentEmail !== email;

    if (emailChanged) {
      // 邮箱变化了，重置验证码相关状态
      setHasCodeBeenSent(false);
      setVerificationCode('');
      setCountdown(0);
      if (countdownTimerRef.current) {
        clearInterval(countdownTimerRef.current);
        countdownTimerRef.current = null;
      }
    }

    setCurrentStep(2);

    // 🔥 只有在以下情况发送验证码：
    // 1. 从未发送过
    // 2. 邮箱发生了变化
    if (!hasCodeBeenSent || emailChanged) {
      sendVerificationCode();
    }
  };

  // 🔥 优化后的返回上一步函数
  const handleBackStep = () => {
    setCurrentStep(1);
    // 不清除验证码状态，保持已发送的验证码有效
  };

  // 注册
  const handleRegister = async () => {
    if (!verificationCode) {
      Toast.show({
        type: 'error',
        text1: '请输入验证码',
      });
      return;
    }

    if (verificationCode.length !== 6) {
      Toast.show({
        type: 'error',
        text1: '验证码格式错误',
        text2: '请输入6位数字验证码',
      });
      return;
    }

    if (!agreedToTerms) {
      Toast.show({
        type: 'error',
        text1: '请同意服务条款和隐私政策',
      });
      return;
    }

    try {
      await dispatch(register({
        email,
        username,
        password,
        verificationCode,
      })).unwrap();

      Toast.show({
        type: 'success',
        text1: '注册成功',
        text2: '欢迎使用AI工具箱',
      });

      // 清理定时器
      if (countdownTimerRef.current) {
        clearInterval(countdownTimerRef.current);
      }

    } catch (error: any) {
      Toast.show({
        type: 'error',
        text1: '注册失败',
        text2: error.message || '请检查信息是否正确',
      });
    }
  };

  const handleEmailChange = (text: string) => {
    setEmail(text);

    // 如果邮箱发生了显著变化，给用户提示
    if (hasCodeBeenSent && lastSentEmail && lastSentEmail !== text) {
      Toast.show({
        type: 'warning',
        text1: '邮箱已改变',
        text2: '请重新发送验证码',
      });
    }
  };

  // 密码强度指示器
  const getPasswordStrength = (): { level: number; text: string; color: string } => {
    if (!password) return { level: 0, text: '', color: '#ccc' };

    let strength = 0;
    if (password.length >= 8) strength++;
    if (password.length >= 12) strength++;
    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
    if (/\d/.test(password)) strength++;
    if (/[!@#$%^&*]/.test(password)) strength++;

    if (strength <= 2) return { level: 1, text: '弱', color: '#ff6b6b' };
    if (strength <= 3) return { level: 2, text: '中', color: '#ffa500' };
    if (strength <= 4) return { level: 3, text: '强', color: '#4caf50' };
    return { level: 4, text: '很强', color: '#2196f3' };
  };

  const passwordStrength = getPasswordStrength();

  return (
      <KeyboardAvoidingView
          style={styles.container}
          behavior="height"
      >
        <LinearGradient
            colors={['#667eea', '#764ba2']}
            style={styles.gradient}
        >
          <ScrollView
              contentContainerStyle={styles.scrollContent}
              showsVerticalScrollIndicator={false}
              keyboardShouldPersistTaps="handled"
          >
            {/* Header */}
            <View style={styles.header}>
              <TouchableOpacity
                  style={styles.backButton}
                  onPress={() => navigation.goBack()}
              >
                <View style={styles.backButtonContainer}>
                  <Text style={styles.backButtonIcon}>←</Text>
                </View>
              </TouchableOpacity>

              <View style={styles.logoContainer}>
                <View style={styles.iconContainer}>
                  <Text style={styles.robotIcon}>🤖</Text>
                </View>
                <Text style={styles.title}>创建账户</Text>
                <Text style={styles.subtitle}>
                  加入AI工具箱，开启智能之旅
                </Text>
              </View>

              {/* 步骤指示器 */}
              <View style={styles.stepIndicator}>
                <View style={[styles.stepDot, currentStep >= 1 && styles.stepDotActive]}>
                  <Text style={[styles.stepNumber, currentStep >= 1 && styles.stepNumberActive]}>1</Text>
                </View>
                <View style={[styles.stepLine, currentStep >= 2 && styles.stepLineActive]} />
                <View style={[styles.stepDot, currentStep >= 2 && styles.stepDotActive]}>
                  <Text style={[styles.stepNumber, currentStep >= 2 && styles.stepNumberActive]}>2</Text>
                </View>
              </View>

              <Text style={styles.stepText}>
                {currentStep === 1 ? '步骤 1/2 - 基本信息' : '步骤 2/2 - 邮箱验证'}
              </Text>
            </View>

            {/* Form */}
            <View style={styles.form}>
              {currentStep === 1 ? (
                  // 第一步：基本信息
                  <>
                    {/* 邮箱输入框 */}
                    <View style={styles.inputWrapper}>
                      <Text style={styles.inputLabel}>邮箱地址</Text>
                      <View style={[styles.inputContainer, email.length > 0 && styles.inputFocused]}>
                        <View style={styles.iconBox}>
                          <Text style={styles.iconText}>📧</Text>
                        </View>
                        <TextInput
                            style={styles.input}
                            placeholder="请输入您的邮箱"
                            placeholderTextColor="#a0a0a0"
                            value={email}
                            onChangeText={handleEmailChange}
                            keyboardType="email-address"
                            autoCapitalize="none"
                            returnKeyType="next"
                            textAlignVertical="center"
                            multiline={false}
                            onSubmitEditing={() => usernameRef.current?.focus()}
                        />
                        {email && (
                            <View style={styles.validationIcon}>
                              <Text style={styles.validationText}>
                                {validateEmail(email) ? '✅' : '❌'}
                              </Text>
                            </View>
                        )}
                      </View>
                    </View>

                    {/* 用户名输入框 */}
                    <View style={styles.inputWrapper}>
                      <Text style={styles.inputLabel}>用户名</Text>
                      <Text style={styles.inputHelp}>2-20个字符，支持字母数字下划线</Text>
                      <View style={[styles.inputContainer, username.length > 0 && styles.inputFocused]}>
                        <View style={styles.iconBox}>
                          <Text style={styles.iconText}>👤</Text>
                        </View>
                        <TextInput
                            ref={usernameRef}
                            style={styles.input}
                            placeholder="请输入用户名"
                            placeholderTextColor="#a0a0a0"
                            value={username}
                            onChangeText={setUsername}
                            autoCapitalize="none"
                            returnKeyType="next"
                            textAlignVertical="center"
                            multiline={false}
                            onSubmitEditing={() => passwordRef.current?.focus()}
                        />
                        {username && (
                            <View style={styles.validationIcon}>
                              <Text style={styles.validationText}>
                                {validateUsername(username) ? '✅' : '❌'}
                              </Text>
                            </View>
                        )}
                      </View>
                    </View>

                    {/* 密码输入框 */}
                    <View style={styles.inputWrapper}>
                      <Text style={styles.inputLabel}>密码</Text>
                      <Text style={styles.inputHelp}>至少8位，包含大小写字母和数字</Text>
                      <View style={[styles.inputContainer, password.length > 0 && styles.inputFocused]}>
                        <View style={styles.iconBox}>
                          <Text style={styles.iconText}>🔒</Text>
                        </View>
                        <TextInput
                            ref={passwordRef}
                            style={styles.input}
                            placeholder="请输入密码"
                            placeholderTextColor="#a0a0a0"
                            value={password}
                            onChangeText={setPassword}
                            secureTextEntry={!showPassword}
                            returnKeyType="next"
                            textAlignVertical="center"
                            multiline={false}
                            onSubmitEditing={() => confirmPasswordRef.current?.focus()}
                        />
                        <TouchableOpacity
                            onPress={() => setShowPassword(!showPassword)}
                            style={styles.eyeButton}
                        >
                          <Text style={styles.eyeIcon}>
                            {showPassword ? '👁️' : '🙈'}
                          </Text>
                        </TouchableOpacity>
                      </View>
                    </View>

                    {/* 密码强度指示器 */}
                    {password && (
                        <View style={styles.passwordStrength}>
                          <View style={styles.strengthBars}>
                            {[1, 2, 3, 4].map(level => (
                                <View
                                    key={level}
                                    style={[
                                      styles.strengthBar,
                                      level <= passwordStrength.level && {
                                        backgroundColor: passwordStrength.color,
                                      },
                                    ]}
                                />
                            ))}
                          </View>
                          <Text style={[styles.strengthText, { color: passwordStrength.color }]}>
                            密码强度：{passwordStrength.text}
                          </Text>
                        </View>
                    )}

                    {/* 确认密码输入框 */}
                    <View style={styles.inputWrapper}>
                      <Text style={styles.inputLabel}>确认密码</Text>
                      <View style={[styles.inputContainer, confirmPassword.length > 0 && styles.inputFocused]}>
                        <View style={styles.iconBox}>
                          <Text style={styles.iconText}>🔐</Text>
                        </View>
                        <TextInput
                            ref={confirmPasswordRef}
                            style={styles.input}
                            placeholder="请再次输入密码"
                            placeholderTextColor="#a0a0a0"
                            value={confirmPassword}
                            onChangeText={setConfirmPassword}
                            secureTextEntry={!showConfirmPassword}
                            returnKeyType="done"
                            textAlignVertical="center"
                            multiline={false}
                        />
                        <TouchableOpacity
                            onPress={() => setShowConfirmPassword(!showConfirmPassword)}
                            style={styles.eyeButton}
                        >
                          <Text style={styles.eyeIcon}>
                            {showConfirmPassword ? '👁️' : '🙈'}
                          </Text>
                        </TouchableOpacity>
                      </View>
                      {confirmPassword && password !== confirmPassword && (
                          <Text style={styles.errorText}>密码不匹配</Text>
                      )}
                    </View>

                    <TouchableOpacity
                        style={styles.nextButton}
                        onPress={handleNextStep}
                    >
                      <LinearGradient
                          colors={['#667eea', '#764ba2']}
                          style={styles.nextButtonGradient}
                      >
                        <Text style={styles.nextButtonText}>下一步</Text>
                        <Text style={styles.nextButtonIcon}>→</Text>
                      </LinearGradient>
                    </TouchableOpacity>
                  </>
              ) : (
                  // 第二步：验证邮箱
                  <>
                    <View style={styles.verificationInfo}>
                      <View style={styles.verificationIconContainer}>
                        <Text style={styles.verificationIcon}>📮</Text>
                      </View>
                      <Text style={styles.verificationTitle}>验证您的邮箱</Text>
                      <Text style={styles.verificationText}>
                        我们已向 <Text style={styles.emailHighlight}>{email}</Text> 发送了验证码
                      </Text>
                      {/* 🔥 新增：显示验证码有效期提示 */}
                      {countdown > 0 && (
                          <Text style={styles.countdownHint}>
                            验证码有效期还剩 {Math.floor(countdown / 60)}分{countdown % 60}秒
                          </Text>
                      )}
                    </View>

                    <View style={styles.codeWrapper}>
                      <Text style={styles.inputLabel}>验证码</Text>
                      <View style={styles.codeContainer}>
                        <TextInput
                            ref={codeRef}
                            style={styles.codeInput}
                            placeholder="请输入6位验证码"
                            placeholderTextColor="#a0a0a0"
                            value={verificationCode}
                            onChangeText={setVerificationCode}
                            keyboardType="number-pad"
                            maxLength={6}
                            textAlign="center"
                        />
                      </View>
                    </View>

                    <TouchableOpacity
                        style={[
                          styles.resendButton,
                          (countdown > 0 || isSendingCode) && styles.resendButtonDisabled
                        ]}
                        onPress={sendVerificationCode}
                        disabled={countdown > 0 || isSendingCode}
                    >
                      <Text style={styles.resendButtonText}>
                        {isSendingCode ? '发送中...' :
                            countdown > 0 ? `重新发送 (${countdown}s)` :
                                '重新发送验证码'}
                      </Text>
                    </TouchableOpacity>

                    <View style={styles.termsContainer}>
                      <View style={styles.checkboxContainer}>
                        <TouchableOpacity
                            style={[styles.customCheckbox, agreedToTerms && styles.customCheckboxChecked]}
                            onPress={() => setAgreedToTerms(!agreedToTerms)}
                        >
                          {agreedToTerms && <Text style={styles.checkboxIcon}>✓</Text>}
                        </TouchableOpacity>
                      </View>
                      <Text style={styles.termsText}>
                        我已阅读并同意
                        <Text style={styles.termsLink} onPress={() => {}}>《服务条款》</Text>
                        和
                        <Text style={styles.termsLink} onPress={() => {}}>《隐私政策》</Text>
                      </Text>
                    </View>

                    <View style={styles.buttonGroup}>
                      <TouchableOpacity
                          style={styles.backStepButton}
                          onPress={handleBackStep} // 使用新地处理函数
                      >
                        <Text style={styles.backStepButtonIcon}>←</Text>
                        <Text style={styles.backStepButtonText}>上一步</Text>
                      </TouchableOpacity>

                      <TouchableOpacity
                          style={[styles.registerButton, (!agreedToTerms || isLoading) && styles.registerButtonDisabled]}
                          onPress={handleRegister}
                          disabled={isLoading || !agreedToTerms}
                      >
                        <LinearGradient
                            colors={(!agreedToTerms || isLoading) ? ['#ccc', '#999'] : ['#667eea', '#764ba2']}
                            style={styles.registerButtonGradient}
                        >
                          {isLoading ? (
                              <View style={styles.loadingContainer}>
                                <ActivityIndicator color="#fff" size="small" />
                                <Text style={styles.registerButtonText}>注册中...</Text>
                              </View>
                          ) : (
                              <>
                                <Text style={styles.registerButtonText}>完成注册</Text>
                                <Text style={styles.registerButtonIcon}>✓</Text>
                              </>
                          )}
                        </LinearGradient>
                      </TouchableOpacity>
                    </View>
                  </>
              )}

              {/* Social Registration */}
              <View style={styles.divider}>
                <View style={styles.dividerLine} />
                <Text style={styles.dividerText}>或使用第三方账号注册</Text>
                <View style={styles.dividerLine} />
              </View>

              <View style={styles.socialLogin}>
                <TouchableOpacity style={styles.socialButton}>
                  <LinearGradient
                      colors={['#fff', '#f8f9fa']}
                      style={styles.socialButtonGradient}
                  >
                    <Text style={styles.googleIcon}>G</Text>
                    <Text style={styles.socialButtonText}>Google</Text>
                  </LinearGradient>
                </TouchableOpacity>
              </View>

              {/* Footer */}
              <View style={styles.footer}>
                <Text style={styles.footerText}>已有账户？</Text>
                <TouchableOpacity onPress={() => navigation.navigate('Login')}>
                  <Text style={styles.loginLink}>立即登录</Text>
                </TouchableOpacity>
              </View>
            </View>
          </ScrollView>
        </LinearGradient>
      </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradient: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    paddingHorizontal: 30,
    paddingVertical: 50,
  },
  header: {
    marginBottom: 30,
  },
  backButton: {
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 1,
  },
  backButtonContainer: {
    width: 40,
    height: 40,
    borderRadius: 12,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    justifyContent: 'center',
    alignItems: 'center',
  },

  warningText: {
    fontSize: 12,
    color: '#f59e0b',
    marginTop: 4,
    marginLeft: 4,
  },

  countdownHint: {
    fontSize: 12,
    color: '#6b7280',
    marginTop: 8,
  },

  backButtonIcon: {
    fontSize: 20,
    color: '#fff',
    fontWeight: 'bold',
  },
  logoContainer: {
    alignItems: 'center',
    marginTop: 40,
  },
  iconContainer: {
    width: 80,
    height: 80,
    borderRadius: 20,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  robotIcon: {
    fontSize: 40,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: 'rgba(255, 255, 255, 0.8)',
    textAlign: 'center',
    lineHeight: 22,
  },
  stepIndicator: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
    marginBottom: 10,
  },
  stepDot: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: 'rgba(255, 255, 255, 0.3)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  stepDotActive: {
    backgroundColor: '#fff',
  },
  stepNumber: {
    fontSize: 14,
    fontWeight: 'bold',
    color: 'rgba(255, 255, 255, 0.7)',
  },
  stepNumberActive: {
    color: '#667eea',
  },
  stepLine: {
    width: 60,
    height: 2,
    backgroundColor: 'rgba(255, 255, 255, 0.3)',
    marginHorizontal: 10,
  },
  stepLineActive: {
    backgroundColor: '#fff',
  },
  stepText: {
    textAlign: 'center',
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
    fontWeight: '500',
  },
  form: {
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderRadius: 24,
    padding: 30,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 20,
    },
    shadowOpacity: 0.15,
    shadowRadius: 30,
    elevation: 8,
  },
  // 输入框包装器
  inputWrapper: {
    marginBottom: 24,
  },
  // 输入框标签
  inputLabel: {
    fontSize: 14,
    fontWeight: '600',
    color: '#374151',
    marginBottom: 8,
    marginLeft: 4,
  },
  // 输入框帮助文字
  inputHelp: {
    fontSize: 12,
    color: '#9ca3af',
    marginBottom: 8,
    marginLeft: 4,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f8fafc',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#e2e8f0',
    paddingHorizontal: 16,
    height: 56,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  // 输入框聚焦状态
  inputFocused: {
    borderColor: '#667eea',
    backgroundColor: '#fff',
    shadowColor: '#667eea',
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 4,
  },
  // 图标容器
  iconBox: {
    width: 32,
    height: 32,
    borderRadius: 8,
    backgroundColor: 'rgba(102, 126, 234, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  iconText: {
    fontSize: 18,
    textAlign: 'center',
  },
  input: {
    flex: 1,
    fontSize: 16,
    color: '#1f2937',
    fontWeight: '500',
    height: '100%',
    ...Platform.select({
      ios: {
        lineHeight: 20,
      },
      android: {
        textAlignVertical: 'center',
      },
    }),
  },
  // 验证图标
  validationIcon: {
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  validationText: {
    fontSize: 14,
  },
  // 眼睛按钮
  eyeButton: {
    width: 32,
    height: 32,
    borderRadius: 8,
    backgroundColor: 'rgba(102, 126, 234, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 8,
  },
  eyeIcon: {
    fontSize: 16,
  },
  // 错误文字
  errorText: {
    fontSize: 12,
    color: '#ff6b6b',
    marginTop: 4,
    marginLeft: 4,
  },
  // 密码强度
  passwordStrength: {
    marginBottom: 16,
    marginTop: -16,
  },
  strengthBars: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 6,
  },
  strengthBar: {
    flex: 1,
    height: 4,
    backgroundColor: '#e2e8f0',
    borderRadius: 2,
    marginHorizontal: 2,
  },
  strengthText: {
    fontSize: 12,
    textAlign: 'right',
    fontWeight: '500',
  },
  // 下一步按钮
  nextButton: {
    borderRadius: 16,
    height: 56,
    marginTop: 8,
    shadowColor: '#667eea',
    shadowOffset: {
      width: 0,
      height: 8,
    },
    shadowOpacity: 0.3,
    shadowRadius: 16,
    elevation: 8,
  },
  nextButtonGradient: {
    flex: 1,
    borderRadius: 16,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  nextButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    marginRight: 8,
  },
  nextButtonIcon: {
    fontSize: 18,
    color: '#fff',
    fontWeight: 'bold',
  },
  // 验证信息
  verificationInfo: {
    alignItems: 'center',
    marginBottom: 32,
  },
  verificationIconContainer: {
    width: 80,
    height: 80,
    borderRadius: 20,
    backgroundColor: 'rgba(102, 126, 234, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
  },
  verificationIcon: {
    fontSize: 36,
  },
  verificationTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1f2937',
    marginBottom: 8,
  },
  verificationText: {
    fontSize: 16,
    color: '#6b7280',
    textAlign: 'center',
    lineHeight: 22,
  },
  emailHighlight: {
    color: '#667eea',
    fontWeight: '600',
  },
  // 验证码输入
  codeWrapper: {
    marginBottom: 24,
  },
  codeContainer: {
    backgroundColor: '#f8fafc',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#e2e8f0',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  codeInput: {
    height: 64,
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1f2937',
    letterSpacing: 8,
    textAlignVertical: 'center',
    paddingHorizontal: 20,
  },
  // 重新发送按钮
  resendButton: {
    alignItems: 'center',
    marginBottom: 24,
    padding: 8,
  },
  resendButtonDisabled: {
    opacity: 0.5,
  },
  resendButtonText: {
    color: '#667eea',
    fontSize: 14,
    fontWeight: '600',
  },
  // 条款容器
  termsContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 24,
    paddingHorizontal: 4,
  },
  checkboxContainer: {
    marginRight: 12,
    marginTop: 2,
  },
  customCheckbox: {
    width: 20,
    height: 20,
    borderRadius: 6,
    borderWidth: 2,
    borderColor: '#d1d5db',
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  customCheckboxChecked: {
    backgroundColor: '#667eea',
    borderColor: '#667eea',
  },
  checkboxIcon: {
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
  termsText: {
    flex: 1,
    fontSize: 14,
    color: '#6b7280',
    lineHeight: 20,
  },
  termsLink: {
    color: '#667eea',
    fontWeight: '600',
  },
  // 按钮组
  buttonGroup: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  // 返回按钮
  backStepButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f8fafc',
    borderRadius: 16,
    height: 56,
    paddingHorizontal: 20,
    borderWidth: 1,
    borderColor: '#e2e8f0',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  backStepButtonIcon: {
    fontSize: 16,
    color: '#667eea',
    fontWeight: 'bold',
    marginRight: 6,
  },
  backStepButtonText: {
    color: '#667eea',
    fontSize: 16,
    fontWeight: '600',
  },
  // 注册按钮
  registerButton: {
    flex: 1,
    marginLeft: 12,
    borderRadius: 16,
    height: 56,
    shadowColor: '#667eea',
    shadowOffset: {
      width: 0,
      height: 8,
    },
    shadowOpacity: 0.3,
    shadowRadius: 16,
    elevation: 8,
  },
  registerButtonDisabled: {
    shadowOpacity: 0.1,
  },
  registerButtonGradient: {
    flex: 1,
    borderRadius: 16,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  registerButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    marginRight: 6,
  },
  registerButtonIcon: {
    fontSize: 16,
    color: '#fff',
    fontWeight: 'bold',
  },
  loadingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  // 分割线
  divider: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 24,
  },
  dividerLine: {
    flex: 1,
    height: 1,
    backgroundColor: '#e2e8f0',
  },
  dividerText: {
    marginHorizontal: 16,
    color: '#9ca3af',
    fontSize: 14,
    fontWeight: '500',
  },
  // 社交登录
  socialLogin: {
    marginBottom: 24,
  },
  socialButton: {
    borderRadius: 16,
    height: 56,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  socialButtonGradient: {
    flex: 1,
    borderRadius: 16,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#e2e8f0',
  },
  googleIcon: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#DB4437',
    marginRight: 8,
  },
  socialButtonText: {
    fontSize: 16,
    color: '#374151',
    fontWeight: '600',
  },
  // 页脚
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 8,
  },
  footerText: {
    color: '#6b7280',
    fontSize: 14,
  },
  loginLink: {
    color: '#667eea',
    fontSize: 14,
    fontWeight: 'bold',
    marginLeft: 4,
  },
});

export default RegisterScreen;